<template>
  <!-- table表格配置 -->
  <div class="queryComponent">
    <el-row>
      <el-table
        ref="multipleTable"
        :data="tableData.list"
        tooltip-effect="dark"
        style="width: 100%; font-size: 10px"
        @row-click="rowClick"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :row-style="tableRowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          v-for="(item, index) in option"
          :key="index"
          :width="item.width"
        >
          <template slot-scope="scope">
            <!-- 添加额外的列来显示是否挂起的状态 -->
            <span v-if="item.prop === 'suspendInd'">
              {{ scope.row.status === 2 ? "是" : "否" }}
            </span>
            <!-- 其他列 -->
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页 -->
    <el-row
      type="flex"
      justify="end"
      align="middle"
      style="height: 60px"
      v-if="tableData.paging"
    >
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="tableData.page.page"
        :page-size="tableData.page.size"
        layout="total, prev, pager, next"
        :total="tableData.page.total"
        :small="true"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "adjustmentTab",
  props: ["tableData", "option"],
  data() {
    return {
      radioId: [],
    };
  },
  methods: {
    handleSelectionChange(selection) {
      //   console.log("选中数据", selection);
      this.$emit("receive2", selection);
      //   this.selectedRows = selection;
    },
    rowClick(row) {
      console.log("点击数据", row);
      this.radioId = row.id;
    },
    // 分页
    handleCurrentChange(newPage) {
      this.$emit("handleChange", newPage);
    },

    // 选中单选背景色
    tableRowClassName({ row, rowIndex }) {
      // console.log("改背景==", row, rowIndex);
      if (this.radioId === row.id) {
        // console.log("改背景");
        return {
          border: "1px solid #000",
          "background-color": "rgb(173 206 234 / 75%)",
        };
      }
    },
  },
};
</script>

<style>
.queryComponent {
  padding-left: 10px;
  padding-right: 10px;
  /* margin-left: 30px; */
  margin-right: 5px;
  margin-top: 20px;
  padding-bottom: 30px;
  /* margin-bottom: 50px; */
  /* border: 1px solid rgb(180, 178, 178); */
}
.mgb10 {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 16px;
}
</style>
